<template>
  <div class="mine">
    <div class="mine-main">
      <p class="mine-title">我的</p>
      <div class="mine-top">
        <VanImage
          class="mine-top-img"
          round
          :src="imgurl"
          width="49"
          height="49"
          alt=""
          @click="userInfoClick"
        />
        <div class="mine-top-count">
          <p class="one" @click="userInfoClick">
            <span>{{
              userInfo.nickname == null ? userInfo.realname : userInfo.nickname
            }}</span>
            个人资料
            <img
              src="../assets/image/icon_right.png"
              width="5"
              height="9"
              alt=""
            />
          </p>
          <p class="two">推荐人：{{ preUserPhone | xingPhone }}</p>
        </div>
        <div class="mine-top-right">
          <img
            :src="
              require('../assets/image/icon_grade_item' +
                userInfo.grade +
                '.png')
            "
            width="42px"
            height="42px"
            alt=""
          />
          <p>{{ userInfo.gradeName }}</p>
        </div>
      </div>
    </div>
    <div class="mineK"></div>
    <div class="mine-one">
      <p class="one">应用专区</p>
      <div class="mine-item">
        <div
          class="mine-items"
          v-for="(item, index) in mineItem1"
          :key="'a' + index"
          @click="mineItemOne(item)"
        >
          <img :src="item.icon" width="20" height="20" alt="" />
          <p class="mine-items-p">{{ item.text }}</p>
          <div class="mine-items-right">
            <img
              src="../assets/image/icon_right.png"
              width="8"
              height="15"
              alt=""
            />
            <p>
              {{
                item.rightText === ""
                  ? ""
                  : userInfo.realnameStatus | realnameStatusType
              }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- end 应用专区 -->
    <div class="mine-one">
      <p class="one">新手专区</p>
      <div class="mine-item">
        <div
          class="mine-items"
          v-for="(item, index) in mineItem2"
          :key="'a' + index"
          @click="mineItemTwo(item)"
        >
          <img :src="item.icon" width="20" height="20" alt="" />
          <p class="mine-items-p">{{ item.text }}</p>
          <div class="mine-items-right">
            <img
              src="../assets/image/icon_right.png"
              width="8"
              height="15"
              alt=""
            />
            <p>{{ item.rightText == "" ? "" : item.rightText }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end 新手专区 -->
    <div class="mine-one">
      <p class="one">功能专区</p>
      <div class="mine-item">
        <div
          class="mine-items"
          v-for="(item, index) in mineItem3"
          :key="'a' + index"
          @click="mineItemTwo(item)"
        >
          <img :src="item.icon" width="20" height="20" alt="" />
          <p class="mine-items-p">{{ item.text }}</p>
          <div class="mine-items-right">
            <img
              src="../assets/image/icon_right.png"
              width="8"
              height="15"
              alt=""
            />
            <p>{{ item.rightText == "" ? "" : item.rightText }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- end 功能专区 -->
    <tabbar />
  </div>
</template>
<script>
import Tabbar from "views/Tabbar.vue";
import { getApiUserInfo, getApiHeaderImageInfo } from "../network/ApiServe";
export default {
  components: { Tabbar },
  created() {
    this.phone = localStorage.getItem("phone");
    this.token = localStorage.getItem("token");
    this.preUserPhone = localStorage.getItem("preUserPhone");
  },
  filters: {
    xingPhone(phone) {
      return phone.substring(0, 3) + " **** " + phone.substring(7);
    },
    realnameStatusType(type) {
      switch (type) {
        case "0":
          return "实名中";
        case "1":
          return "已实名";
        case "2":
          return "实名失败";
        case "3":
          return "未实名";
      }
    },
  },
  data() {
    return {
      imgurl: require("../assets/image/icon_share_item1.png"),
      mineItem1: [
        {
          icon: require("../assets/image/icon_mine_item1.png"),
          text: "实名认证",
          rightText: "未实名",
          rightIcon: require("../assets/image/icon_right.png"),
          isOpen: false,
          path: "realName",
        },
        {
          icon: require("../assets/image/icon_mine_item2.png"),
          text: "卡片管理",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
        {
          icon: require("../assets/image/icon_mine_item3.png"),
          text: "我的钱包",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
        {
          icon: require("../assets/image/icon_mine_item4.png"),
          text: "交易记录",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
      ],
      mineItem2: [
        {
          icon: require("../assets/image/icon_mine_item5.png"),
          text: "朋友圈",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
        {
          icon: require("../assets/image/icon_mine_item6.png"),
          text: "视频教程",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
        {
          icon: require("../assets/image/icon_mine_item7.png"),
          text: "秘籍手册",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
        {
          icon: require("../assets/image/icon_mine_item8.png"),
          text: "推广模式",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
      ],
      mineItem3: [
        {
          icon: require("../assets/image/icon_mine_item9.png"),
          text: "联系客服",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
        {
          icon: require("../assets/image/icon_mine_item10.png"),
          text: "设置",
          rightText: "",
          rightIcon: require("../assets/image/icon_right.png"),
        },
      ],
      userInfo: { grade: 0 },
      realNameStatus: [
        {
          type: "0",
          text: "实名中",
        },
        {
          type: "1",
          text: "已实名",
        },
        {
          type: "2",
          text: "实名失败",
        },
        {
          type: "3",
          text: "未实名",
        },
      ],
    };
  },
  mounted() {
    this.getUserInfo();
    this.getApiHeaderImageInfo();
  },
  methods: {
    userInfoClick() {
      this.$router.push("/userinfo");
    },
    mineItemOne(item) {
      console.log(item.text);
      if (item.isOpen) {
      } else {
        this.$router.push("realName");
      }
    },
    mineItemTwo(item) {
      console.log(item.text);
    },
    mineItemThree(item) {
      console.log(item.text);
    },
    getUserInfo() {
      let _this = this;
      getApiUserInfo(_this.token)
        .then((res) => {
          if (res.resp_code === "000000") {
            _this.userInfo = res.result;
          }
          console.log(_this.userInfo, "userInfo");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getApiHeaderImageInfo() {
      getApiHeaderImageInfo(this.phone)
        .then((res) => {
          if (res.resp_code === "000000") {
            this.imgurl = res.result;
          }
          console.log(this.imgurl, "HeaderImage");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.mine {
  background-color: #f7f7f7;
  padding-bottom: 60px;
}
.mine-main {
  height: 150px;
  width: 100%;
  position: fixed;
  background-color: #f7f7f7;
}
.mineK {
  height: 150px;
}
.mine-title {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #444;
  padding-top: 30px;
}
.mine-top {
  display: flex;
  margin: 20px;
  align-items: center;
}
.mine-top img.mine-top-img {
  display: block;
}
.mine-top-count {
  flex: 1;
  margin-left: 12px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: center;
}
.mine-top-count p.one {
  color: #666;
  font-size: 13px;
}
.mine-top-count p.one span {
  color: #444;
  font-size: 15px;
  margin-right: 15px;
}
.mine-top-count p.one img {
  margin-left: 5px;
}
.mine-top-count .two {
  font-size: 12px;
  color: #444;
  margin-top: 6.5px;
}
.mine-top-right {
  padding: 10px;
  text-align: center;
}
.mine-top-right p {
  color: #666;
  font-size: 11px;
}
.mine-one {
  margin-top: 15px;
  margin-left: 12px;
  margin-right: 12px;
  background-color: #fff;

  border-radius: 12px;
}
.mine-one p.one {
  font-size: 13px;
  padding-left: 15px;
  color: #999;
  font-weight: 600;
  line-height: 49px;
  border-bottom: 1px solid #f7f7f7;
}
.mine-item {
  display: flex;
  flex-direction: column;
}
.mine-items {
  display: flex;
  margin-left: 15px;
  margin-right: 15px;
  align-items: center;
  height: 52px;
}
.mine-items p.mine-items-p {
  flex: 1;
  margin-left: 13.5px;
  font-size: 14px;
  color: #323334;
}
.mine-items-right img {
  display: block;
  margin-left: 9px;
}
.mine-items-right {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}
.mine-items-right p {
  color: #444;
  font-size: 15px;
}
</style>